<template>
  <div>
    <a-divider>用户表单关联</a-divider>
    <a-form-item label='任务表单标题' v-bind="formItemLayout">
      <a-input v-model="configData.formTitle" @change="dataChange"/>
    </a-form-item>
    <a-form-item label='任务表单类型' v-bind="formItemLayout">
      <a-radio-group button-style="solid" v-model="configData.formType" @change="dataChange">
        <a-radio-button value="0">系统表单</a-radio-button>
        <!--            自定义表单暂未实现-->
        <a-radio-button value="1" disabled>自定义表单</a-radio-button>
      </a-radio-group>
    </a-form-item>
    <a-form-item v-if="configData.formType=='1'" label='任务表单路径' v-bind="formItemLayout">
      <a-input @change="dataChange"/>
    </a-form-item>
    <a-form-item v-if="configData.formType=='0'" label='任务表单关联' v-bind="formItemLayout">
      <a-space direction="vertical">
        <a-select show-search :filter-option="filterOption" v-model="configData.formId" @change="dataChange" style="width: 200px">
          <a-select-option v-for="r in formData" :key="r.formId">{{r.formName}}</a-select-option>
        </a-select>
        <div>
          <a-space>
            <a @click="viewForm()">预览</a>
            <a @click="editForm()">编辑</a>
            <a @click="addForm()">创建</a>
          </a-space>
        </div>
      </a-space>
    </a-form-item>
    <a-form-item label="后端验证规则"  v-bind="formItemLayout" extra="表单提交时通过后端规则校验，通过后该节点才正式完成并流出。">
      <span>已配置{{configData.summitRule.fsRules.length}}个规则 | <a @click="editFlowRulePlugins">配置</a></span>
    </a-form-item>
    <a-divider>节点权限控制</a-divider>
    <a-form-item label='任务分配角色' v-bind="formItemLayout">
      <a-select
        mode="multiple"
        :allowClear="true"
        style="width: 100%"
        v-model="configData.roleNames"
        :disabled="candidateVisible"
        @change="dataChange">
        <a-select-option v-for="r in roleData" :key="r.roleName">{{r.roleName}}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label='任务分配用户' v-bind="formItemLayout">
      <a-select
        mode="multiple"
        :allowClear="true"
        style="width: 100%"
        @change="dataChange"
        :disabled="candidateVisible"
        v-model="configData.userIds">
        <a-select-option v-for="r in userData" :key="r.username">{{r.username}}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label='由前驱节点分配经办用户' v-bind="formItemLayout2">
      <a-switch v-model="configData.setCandidateUserPrevious" :disabled="candidateVisible" @change="scCandidateUserPrevious"></a-switch>
    </a-form-item>
    <a-form-item label='优先分配到历史经办人' v-bind="formItemLayout2">
      <a-switch v-model="configData.setHistUserFirst" :disabled="candidateVisible" @change="dataChange"></a-switch>
    </a-form-item>
    <a-form-item label='直接分配到流程创建人' v-bind="formItemLayout2">
      <a-switch v-model="configData.setAssignToApplicant" @change="scAssignToApplicant"></a-switch>
    </a-form-item>
    <view-form ref="ViewForm"></view-form>
    <form-config ref="FormConfig" @success="getForms"></form-config>
    <flow-rule-plugin-config @change="dataChange" v-model="configData.summitRule.fsRules" ref="FlowRulePluginConfig"></flow-rule-plugin-config>
    <!-- 图标选择 -->
  </div>
</template>
<script>
import ViewForm from '../../formConfig/ViewForm'
import FormConfig from '../../formConfig/FormConfig'
import Icons from '../../../system/menu/Icons'
import FlowRulePluginConfig from "./FlowRulePluginConfig";

const formItemLayout = {
  labelCol: {span: 8},
  wrapperCol: {span: 14}
}
const formItemLayout2 = {
  labelCol: {span: 12},
  wrapperCol: {span: 10}
}
export default {
  name: 'UserNodeConfig',
  components: {ViewForm, FormConfig, Icons, FlowRulePluginConfig},
  props: {
    configData: {
      type: Object,
      default: () => ({
        // 对应后端 CustomUserNode
        userIds: undefined,
        roleNames: undefined,
        formId: '',
        formPath: '',
        formTitle: '',
        formType: '0',
        setCandidateUserPrevious: false,
        setHistUserFirst: false,
        setAssignToApplicant: false,
        summitRule: {
          fsRules: []
        }
      })
    }
  },
  model: {
    prop: 'configData',
    event: 'input'
  },
  data () {
    return {
      loading: false,
      formItemLayout,
      formItemLayout2,
      roleData: [],
      userData: [],
      formData: [],
      candidateVisible: false
    }
  },
  methods: {
    editFlowRulePlugins() {
      this.$refs.FlowRulePluginConfig.edit('后端验证规则', 'FSRule')
    },
    dataChange () {
      this.$emit('input', this.configData)
    },
    getForms () {
      this.$get('form').then((r) => {
        this.formData = r.data.rows
      })
    },
    getUsers () {
      this.$get('user').then((r) => {
        this.userData = r.data.rows
      })
    },
    getRoles () {
      this.$get('role/getAll').then((r) => {
        this.roleData = r.data
      })
    },
    scCandidateUserPrevious () {
      const data = this.configData
      if (data.setCandidateUserPrevious === true) {
        if ((data.roleNames === undefined || data.roleNames.length === 0) &&
          (data.userIds === undefined || data.userIds.length === 0)) {
          this.$message.error('开启前请选择关联角色或关联用户')
          this.configData.setCandidateUserPrevious = false
        }
      }
      this.dataChange()
    },
    scAssignToApplicant () {
      if (this.configData.setAssignToApplicant === true) {
        this.candidateVisible = true
        this.configData.setCandidateUserPrevious = false
        this.configData.setHistUserFirst = false
      } else {
        this.candidateVisible = false
      }
      this.dataChange()
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    viewForm () {
      // 当前选中的表单json
      let formId = this.configData.formId
      if (formId == null) {
        this.$message.warning('请从左侧先选择表单')
        return
      }
      let data = this.formData.find(value => value.formId === formId)
      this.$refs.ViewForm.onOpen(data)
    },
    editForm () {
      let formId = this.configData.formId
      if (formId == null) {
        this.$message.warning('请从左侧先选择表单')
        return
      }
      let data = this.formData.find(value => value.formId === formId)
      this.$refs.FormConfig.onOpen(data)
    },
    addForm () {
      let record = {}
      record.formJson = FormConfig.initJSON
      this.$refs.FormConfig.onOpen(record)
    }
  },
  mounted () {
    this.getForms()
    this.getRoles()
    this.getUsers()
  }
}
</script>
